<template>
  <scroller class="wrapper">
    <div class="group">
      <text class="label">index: </text>
      <text class="title">{{value}}</text>
    </div>
    <div class="group">
      <text class="button"
            @click="pick">Pick</text>
    </div>

    <div class="group">
      <text class="label">Date: </text>
      <text class="title">{{dateValue}}</text>
    </div>
    <div class="group">
      <text class="button"
            @click="pickDate">Pick Date</text>
    </div>

    <div class="group">
      <text class="label">Time: </text>
      <text class="title">{{timeValue}}</text>
    </div>
    <div class="group">
      <text class="button"
            @click="pickTime">Pick Time</text>
    </div>

    <wxc-cell :title="attr.text"
              :desc="attr.value || '无'"
              v-for="(attr,index) in attrArr"
              :key="index"
              :index="index"
              :has-arrow="false"
              :has-top-border="true"></wxc-cell>

  </scroller>
</template>

<script>
import { WxcCell } from 'weex-ui'
const picker = weex.requireModule('picker')

export default {
  components: { WxcCell },
  data() {
    return {
      timeValue: '',
      dateValue: '',
      value: '',
      attrArr: []
    }
  },
  created() {
    if (weex && weex.config && weex.config.env) {
      for (const i in weex.config.env) {
        this.attrArr.push({
          text: i,
          value: weex.config.env[i]
        })
      }
    }
  },
  methods: {
    pickDate() {
      picker.pickDate({
        value: this.value
      }, event => {
        if (event.result === 'success') {
          this.dateValue = event.data
        }
      })
    },

    pickTime() {
      picker.pickTime({
        value: this.timeValue
      }, event => {
        if (event.result === 'success') {
          this.timeValue = event.data
        }
      })
    },

    pick() {
      picker.pick({
        items: ['Apple', 'Banana', 'Orange']
      }, event => {
        if (event.result === 'success') {
          this.value = event.data
        }
      })
    },
  }
}
</script>

<style scoped>
.wrapper {
}
.group {
  flex-direction: row;
  justify-content: center;
  margin-bottom: 40px;
  align-items: center;
}
.label {
  font-size: 40px;
  color: #888888;
}
.title {
  font-size: 80px;
  color: #41b883;
}
.button {
  font-size: 36px;
  width: 280px;
  color: #41b883;
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
</style>